<template>
  <el-container>
    <el-header>
      <el-row>
        <el-col :span="6">北辰散乱污企业监测系统</el-col>
      </el-row>
      <el-dialog
        title="添加企业信息"
        :visible.sync="centerDialogVisible"
        width="60%"
        center>
        <el-form label-width="80px" class="company" :model="editForm">
          <el-row>
            <el-col :span="12">
              <el-form-item label="公司名称">
                <el-input v-model="editForm.companyname"
                  placeholder="公司名称"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="地址">
                <el-input v-model="editForm.region"
                  placeholder="地址"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="建筑面积">
                <el-input v-model="editForm.areacovered"
                  placeholder="建筑面积"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="产业类型">
                <el-input v-model="editForm.industrytype"
                  placeholder="产业类型"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="调解方式">
                <el-input v-model="editForm.regulationmode"
                  placeholder="调解方式"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="新企业">
                <el-select v-model="editForm.newenterprise" placeholder="调解方式">
                  <el-option label="是" value="是"></el-option>
                  <el-option label="否" value="否"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="经度">
                <el-input v-model="editForm.longitude"
                  placeholder="经度"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="纬度">
                <el-input v-model="editForm.latitude"
                  placeholder="纬度"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="详情">
                <el-input v-model="editForm.remarks"
                  placeholder="详情"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="拆迁">
                <el-select v-model="editForm.dismantling" placeholder="调解方式">
                  <el-option label="是" value="是"></el-option>
                  <el-option label="否" value="否"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="新企业名称">
                <el-input v-model="editForm.newenterprisename"
                  placeholder="新企业名称"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="程序">
                <el-input v-model="editForm.procedures"
                  placeholder="程序"/>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="centerDialog">添 加</el-button>
        </span>
      </el-dialog>
    </el-header>
    <el-container class="container">
      <transition enter-active-class="fadeIn">
        <el-aside v-show="aside"
          width="200px">
          <div class="border-style">
            <router-link to="/index">污染企业实时信息</router-link>
          </div>
          <div class="border-style">
            <router-link to="/Detail">企业信息</router-link>
          </div>
        </el-aside>
      </transition>
      <div class="slide"
        @click="slideA">
        <i class="el-icon-d-arrow-left icon"></i>
      </div>
      <el-main>
        <Table :table="table" 
        @handleDel="handleDel"
        @handleEdit="handleEdit"/>
        <div class="page-box">
          <pagination :pageProps="pageProps"
            @pageSizeChange="pageSizeChange"
            @pageCurrentChange="pageCurrentChange" />
        </div>
        <el-dialog :title="modify.title"
          :visible.sync="dialog"
          :before-close="handleClose"
          width="60%">
          <el-form label-width="80px" class="company">
            <el-row>
              <el-col :span="12">
                <el-form-item label="公司名称">
                  <el-input v-model="modify.data.companyname"
                    placeholder="公司名称"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="地址">
                  <el-input v-model="modify.data.region"
                    placeholder="地址"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="建筑面积">
                  <el-input v-model="modify.data.areacovered"
                    placeholder="建筑面积"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="产业类型">
                  <el-input v-model="modify.data.industrytype"
                    placeholder="产业类型"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="调解方式">
                  <el-input v-model="modify.data.regulationmode"
                    placeholder="调解方式"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="新企业">
                  <el-select v-model="modify.data.newenterprise" placeholder="调解方式">
                    <el-option label="是" value="是"></el-option>
                    <el-option label="否" value="否"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="经度">
                  <el-input v-model="modify.data.longitude"
                    placeholder="经度"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="纬度">
                  <el-input v-model="modify.data.latitude"
                    placeholder="纬度"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="详情">
                  <el-input v-model="modify.data.remarks"
                    placeholder="详情"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="拆迁">
                  <el-select v-model="modify.data.dismantling" placeholder="调解方式">
                    <el-option label="是" value="是"></el-option>
                    <el-option label="否" value="否"></el-option>
                  </el-select>
                  <!-- <el-input v-model="editForm.dismantling"
                    placeholder="拆迁"/> -->
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="新企业名称">
                  <el-input v-model="modify.data.newenterprisename"
                    placeholder="新企业名称"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="程序">
                  <el-input v-model="modify.data.procedures"
                    placeholder="程序"/>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div slot="footer"
            class="dialog-footer">
            <el-button size="mini"
              @click="handleClose">取 消</el-button>
            <el-button size="mini"
              type="primary"
              @click="handleSubMit">确 定</el-button>
          </div>
        </el-dialog>
      </el-main>
    </el-container>
    <el-footer>
      <el-col :span="18" class="enterFication">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item class="modify1">
              <el-input id="query1" v-model="formInline.type" placeholder="请输入类型名称"  v-on:input ="inputFunc"></el-input>
              <div id="div_items" style="display:none;"> 
                <div v-for="name in names" :key="name.name" data-num="name.id" @click="bainhua($event)">{{name.name}}</div>
							</div>
            </el-form-item>
            <el-form-item class="modify">
              <el-input id="query" v-model="formInline.name" placeholder="请输入公司名称" v-on:input ="inputFunc1"></el-input>
              <div id="div_items1" style="display:none;"> 
                <div v-for="name in modifyNames" :key="name.name" data-num="name.id" @click="bainhua1($event)">{{name.name}}</div>
							</div>
              <div class="renzheng" style="display:none" id="renzheng">请输入公司名称</div>
            </el-form-item>
            <el-form-item class="chaxun">
              <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="centerDialogVisible = true" class="xinzhen">新增</el-button>
            </el-form-item>
          </el-form>
        </el-col>
    </el-footer>
  </el-container>
</template>

<script>
import { Message } from 'element-ui'
import Table from './table/table'
import Pagination from './pagination/pagination'
export default {
  name: 'Layout',
  components: {
    Table,
    Pagination
  },
  data() {
    return {
      aside: true,
      yincang: true,
      formInline: {
        name: '',
        type:''
      },
      editForm: {
        companyname: '',
        region: '',
        areacovered: '',
        industrytype: '',
        regulationmode: '',
        newenterprise: '',
        longitude: '',
        latitude: '',
        remarks: '',
        dismantling: '',
        newenterprisename: '',
        procedures: ''
      },
      names: '',
      modifyNames: '',
      centerDialogVisible: false,
      dialog: false,
      modify: {
        title: '修改企业信息',
        data: []
      },
      table: {
        hasOperation: true,
        loading: false,
        tHead: [
          {
            id: 1,
            prop: 'id',
            label: '数据 ID',
            width: '100',
            show: true
          },
          {
            id: 2,
            prop: 'companyname',
            label: '公司名称',
            show: true
          },
          {
            id: 3,
            prop: 'areacovered',
            label: '建筑面积',
            show: true
          },
          {
            id: 4,
            prop: 'dismantling',
            label: '拆迁',
            show: true
          },
          {
            id: 5,
            prop: 'newenterprise',
            label: '新企业',
            show: true
          },
          {
            id: 6,
            prop: 'region',
            label: '地址',
            show: true
          },
          {
            id: 7,
            prop: 'regulationmode',
            label: '调解方式',
            show: true
          },
          {
            id: 8,
            prop: 'remarks',
            label: '详情',
            show: true
          }
        ],
        operation: {
          label: '操作',
          width: '200',
          minWidth: '100',
          className: '',
          data: [
            {
              id: 1,
              label: '修改',
              Fun: 'handleEdit',
              btnType: 'primary',
              size: 'mini',
              className: 'show'
            },
            {
              id: 2,
              label: '删除',
              Fun: 'handleDel',
              btnType: 'danger',
              size: 'mini',
              className: 'show'
            }
          ]
        },
        data: []
      },
      pageProps: {
        layout: 'total, sizes, prev, pager, next, jumper',
        currentPage: 1,
        pageSize: 10,
        pageSizes: [10, 20, 50, 100],
        total: 0
      }
    }
  },
  created() {
    this.getDicData(this.pageProps.pageSize, this.pageProps.currentPage)
  },
  methods: {
    bainhua(e,num){
      document.getElementById('query1').value = e.target.innerHTML
      document.getElementById('div_items').style.display = "none"
    },
    inputFunc(){
      const type = document.getElementById('query1').value
      // console.log(type)
      this.$api.ENTERINFOR_SYSTEM.typeQuery({
        name: type
      }).then(res => {
        // console.log(res)
        document.getElementById('div_items').style.display = "block"
        for(let i=0;i<res.data.length;i++) {
          var cityName = []
        for(let i=0;i<res.data.length;i++) {
          const obj = {
            id: res.data[i].id,
            name: res.data[i].name
          }
          cityName.push(obj)
        }
        this.names = cityName
        }
      })
    },
    onSubmit() {
      const name = document.getElementById('query').value
      const type = document.getElementById('query1').value
      // console.log(name)
      // console.log(type)
      // console.log(this.names)
      var dataId = ''
      for(let j=0;j<this.names.length;j++){
        if(type === this.names[j].name){
          dataId = this.names[j].id
        }
      }
      // console.log(dataId)
      if(type !== '' && name === ''){
        document.getElementById('renzheng').style.display = "block"
      }
      if(name !== '' && type === ''){
        // console.log(111)
        this.$api.ENTERINFOR_SYSTEM.nameQuery({
          companyname: name
        }).then(res => {
          // console.log(res)
          const data = res.data.content
          this.table.data = data
          this.pageProps.total = res.data.totalElements
        })
      }
      const params = {
        industrytype: dataId,
        companyname: name
      }
      if(type !== '' && name !== ''){
        // console.log(111)
        this.$api.ENTERINFOR_SYSTEM.typeNameQuery(params)
        .then(res => {
          // console.log(res.data)
          const data = res.data
          this.table.data = data
          this.pageProps.total = 1
        })
      }
    },
    bainhua1(e,num){
      document.getElementById('query').value = e.target.innerHTML
      document.getElementById('div_items1').style.display = "none"
    },
    inputFunc1(){
      const name = document.getElementById('query').value
      this.$api.ENTERINFOR_SYSTEM.nameQuery({
          companyname: name
        }).then(res => {
          // console.log(res.data.content)
          document.getElementById('div_items1').style.display = "block"
            var cityName = []
          for(let i=0;i<res.data.content.length;i++) {
            const obj = {
              id: res.data.content[i].id,
              name: res.data.content[i].companyname
            }
            cityName.push(obj)
          }
          // console.log(cityName)
          this.modifyNames = cityName
        })
    },
    getDicData(pageSize, pageNo) {
      this.$api.ENTERINFOR_SYSTEM.EnterpriseInfor({
        size: pageSize,
        page: pageNo
      }).then(res => {
        // console.log(res.data)
        const data = res.data.content
        this.table.data = data
        this.pageProps.total = res.data.totalElements
        this.pageProps.currentPage = pageNo
      })
    },
    pageSizeChange(pageSize) {
      // console.log(`每页 ${pageSize} 条`)
      const tableDataLength = this.table.data.length
      this.pageProps.pageSize = pageSize
      if (tableDataLength < this.pageProps.pageSize) {
        this.getDicData(pageSize, 1)
      } else {
        const pageNo = this.pageProps.currentPage
        this.getDicData(pageSize, pageNo)
      }
    },
    pageCurrentChange(pageCurrent) {
      this.pageProps.currentPage = pageCurrent
      const pageSize = this.pageProps.pageSize
      this.getDicData(pageSize, pageCurrent)
    },
    centerDialog() {
      this.centerDialogVisible = false
      // console.log(this.editForm)
      const params = ({
        companyname: this.editForm.companyname,
        region: this.editForm.region,
        areacovered: this.editForm.areacovered,
        industrytype: parseInt(this.editForm.industrytype),
        regulationmode: this.editForm.regulationmode,
        newenterprise: this.editForm.newenterprise,
        longitude: this.editForm.longitude,
        latitude: this.editForm.latitude,
        remarks: this.editForm.remarks,
        dismantling: this.editForm.dismantling,
        newenterprisename: this.editForm.newenterprisename,
        procedures: this.editForm.procedures
      })
      // console.log(params)
      this.$api.ENTERINFOR_SYSTEM.EnterpriseInforAdd(params)
      .then(res => {
        // console.log(res)
        this.getDicData(this.pageProps.pageSize, this.pageProps.currentPage)
      })
    },
    slideA() {
      this.aside = !this.aside
    },
    handleDel(index, row) {
      // console.log(row.id)
      this.$confirm('是否确认删除？')
        .then(_ => {
          this.$api.ENTERINFOR_SYSTEM.EnterpriseInforDelete({ id: row.id })
          .then(res => {
              // console.log(res)
              if (res.code === 0) {
                this.table.data.splice(index, 1)
                Message({
                  showClose: true,
                  message: '删除成功',
                  type: 'success',
                  duration: 3 * 1000
                })
              } else {
                Message({
                  showClose: true,
                  message: '删除失败',
                  type: 'error',
                  duration: 3 * 1000
                })
              }
            }
          )
        })
        .catch(_ => {
          return false
        })
    },
    handleEdit(index, row){
      this.dialog = true
      this.modify.data = row
    },
    handleClose(done) {
      this.dialog = false
      this.modify.data = []
    },
    handleSubMit() {
      // console.log(this.modify.data)
      const params = {
        id: this.modify.data.id,
        companyname: this.modify.data.companyname,
        region: this.modify.data.region,
        areacovered: this.modify.data.areacovered,
        industrytype: this.modify.data.industrytype,
        regulationmode: this.modify.data.regulationmode,
        newenterprise: this.modify.data.newenterprise,
        longitude: this.modify.data.longitude,
        latitude: this.modify.data.latitude,
        remarks: this.modify.data.remarks,
        dismantling: this.modify.data.dismantling,
        newenterprisename: this.modify.data.newenterprisename,
        procedures: this.modify.data.procedures
      }
      // console.log(params)
      this.$confirm('是否确定修改？')
        .then(_ => {
          this.dialog = false
          this.$api.ENTERINFOR_SYSTEM.EnterpriseInforModify(params)
          .then(res => {
            Message({
              showClose: true,
              message: '修改成功',
              type: 'success',
              duration: 3 * 1000
            })
            this.modify.data = []
          })
        })
        .catch(_ => {})
    }
  }
}
</script>

<style scoped>
.map{
  height: 875px;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}
.el-container{
  height: 100%;
}
.container{
  position: relative;
}
.el-aside{
  background: #0C0F23;
  z-index: 5;
}
.icon{
  position: absolute;
  color: #fff;
  top: 50%;
}
.slide{
  display: block;
  width: 20px;
  height: 100%;
  background: #181b2e;
  cursor: pointer;
  z-index: 5;
}
.el-header{
  background: #23262E;
  color: #009688;
  font-size: 20px;
  line-height: 60px;
}
.el-button--text{
  color: #fff;
  font-size: 20px;
}
.el-button--text:hover{
  color: #fff;
}
.el-dialog__header{
  padding: 0;
  background: #F8F8F8;
  border-bottom: 1px solid #eee;
  line-height: 40px;
  text-align: left;
  padding-left: 10px;
}
.el-dialog__title{
  font-size: 14px;
}
.el-dialog--center .el-dialog__body{
  padding: 0 10px;
}
.dialog{
  font-size: 20px;
  line-height: 40px;
}
.button,.demo-form-inline{
  float: left;
  margin-top: 10px;
}
.demo-form-inline{
  margin-left: 100px;
}
.border-style{
  height: 60px;
  line-height: 60px;
  text-align: center;
  border-bottom: 3px solid #196091;
}
a{
  text-decoration: none;
  color: #fff;
  font-size: 18px;
  padding: 18px 5px 18px 5px;
}
.company{
  padding: 0 20px;
  margin-top: 20px;
}
.el-form-item__label{
  padding: 0 10px 0 0;
}
.el-select{
  width: 100%;
}
.xinzhen{
  margin-left: 100px;
}
#div_items{
  width: 200px;
  position: absolute;
  top: 42px;
  left: 5px;
  z-index: 999;
  background: #fff;
  padding: 0 10px;
  height: 200px;
  overflow-y: scroll;
}
#div_items1{
  width: 290px;
  position: absolute;
  top: 42px;
  left: 5px;
  z-index: 999;
  background: #fff;
  padding: 0 10px;
  height: 200px;
  overflow-y: scroll;
}
.modify .el-form-item__content{
  width: 315px;
}
.modify1 .el-form-item__content{
  width: 225px;
}
.renzheng{
  color: red;
  position: absolute;
  top: 0;
  right: 0;
  width: 100px
}
.el-footer{
  width: 100%;
  position: absolute;
  top: 60px;
  left: 0;
  background: #e5e5e5;
}
.enterFication{
  padding-left: 15%;
}
</style>